<template>
  <div 
    class="apple-chart" 
    :style="{ height: height }"
    :class="{ 'apple-chart-loading': loading }"
  >
    <div v-if="title || $slots.title" class="apple-chart-header">
      <h3 v-if="title" class="apple-chart-title">{{ title }}</h3>
      <slot v-else name="title"></slot>
      <div v-if="$slots.actions" class="apple-chart-actions">
        <slot name="actions"></slot>
      </div>
    </div>
    
    <div class="apple-chart-body">
      <div v-if="loading" class="apple-chart-loading-overlay">
        <div class="apple-chart-spinner"></div>
      </div>
      
      <div v-else-if="error" class="apple-chart-error">
        <icon-warning class="error-icon" />
        <p class="error-message">{{ errorMessage || '图表加载失败' }}</p>
        <button v-if="onRetry" @click="onRetry" class="retry-button">重试</button>
      </div>
      
      <div v-else-if="isEmpty" class="apple-chart-empty">
        <icon-empty class="empty-icon" />
        <p class="empty-message">{{ emptyMessage || '暂无数据' }}</p>
      </div>
      
      <div v-else class="apple-chart-content">
        <slot></slot>
      </div>
    </div>
    
    <div v-if="$slots.footer" class="apple-chart-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

// 占位图标组件
const IconWarning = (props, { slots }) => {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 24 24" 
      width="24" 
      height="24" 
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="12" y1="8" x2="12" y2="12"></line>
      <line x1="12" y1="16" x2="12.01" y2="16"></line>
    </svg>
  )
}

const IconEmpty = (props, { slots }) => {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 24 24" 
      width="24"
      height="24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="8" y1="12" x2="16" y2="12"></line>
    </svg>
  )
}

const props = defineProps({
  // 图表标题
  title: {
    type: String,
    default: ''
  },
  // 图表高度
  height: {
    type: String,
    default: '300px'
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 错误状态
  error: {
    type: Boolean,
    default: false
  },
  // 错误信息
  errorMessage: {
    type: String,
    default: ''
  },
  // 空数据状态
  isEmpty: {
    type: Boolean,
    default: false
  },
  // 空数据提示
  emptyMessage: {
    type: String,
    default: ''
  },
  // 重试回调
  onRetry: {
    type: Function,
    default: null
  }
});

</script>

<style scoped>
.apple-chart {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--apple-surface-light, #ffffff);
  border-radius: var(--border-radius-lg, 12px);
  overflow: hidden;
  box-shadow: var(--apple-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
  transition: all 0.3s var(--ease-apple, cubic-bezier(0.16, 1, 0.3, 1));
}

.apple-chart:hover {
  box-shadow: var(--apple-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}

.apple-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--apple-border-light, rgba(0, 0, 0, 0.1));
}

.apple-chart-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--apple-text-primary-light, #000000);
}

.apple-chart-actions {
  display: flex;
  gap: 8px;
}

.apple-chart-body {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.apple-chart-content {
  width: 100%;
  height: 100%;
}

.apple-chart-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--apple-border-light, rgba(0, 0, 0, 0.1));
  font-size: 14px;
  color: var(--apple-text-secondary-light, #6e6e73);
}

/* 加载状态 */
.apple-chart-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.apple-chart-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 122, 255, 0.1);
  border-radius: 50%;
  border-top-color: var(--apple-primary, #007aff);
  animation: apple-chart-spin 1s linear infinite;
}

@keyframes apple-chart-spin {
  to { transform: rotate(360deg); }
}

/* 错误状态 */
.apple-chart-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.error-icon {
  font-size: 32px;
  margin-bottom: 12px;
  color: var(--apple-danger, #ff3b30);
}

.error-message {
  margin: 0 0 16px;
  color: var(--apple-text-secondary-light, #6e6e73);
  font-size: 14px;
}

.retry-button {
  background-color: transparent;
  border: 1px solid var(--apple-primary, #007aff);
  color: var(--apple-primary, #007aff);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.retry-button:hover {
  background-color: var(--apple-primary, #007aff);
  color: white;
}

/* 空数据状态 */
.apple-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
  color: var(--apple-text-tertiary-light, #8e8e93);
  opacity: 0.5;
}

.empty-message {
  margin: 0;
  color: var(--apple-text-secondary-light, #6e6e73);
  font-size: 14px;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .apple-chart {
    background-color: var(--apple-surface-dark, #1c1c1e);
    box-shadow: var(--apple-shadow-sm-dark, 0 1px 3px rgba(0, 0, 0, 0.2));
  }
  
  .apple-chart:hover {
    box-shadow: var(--apple-shadow-md-dark, 0 4px 6px rgba(0, 0, 0, 0.2));
  }
  
  .apple-chart-header {
    border-bottom-color: var(--apple-border-dark, rgba(255, 255, 255, 0.1));
  }
  
  .apple-chart-title {
    color: var(--apple-text-primary-dark, #ffffff);
  }
  
  .apple-chart-footer {
    border-top-color: var(--apple-border-dark, rgba(255, 255, 255, 0.1));
    color: var(--apple-text-secondary-dark, #a1a1a6);
  }
  
  .apple-chart-loading-overlay {
    background-color: rgba(28, 28, 30, 0.7);
  }
  
  .apple-chart-spinner {
    border-color: rgba(10, 132, 255, 0.1);
    border-top-color: var(--apple-primary-dark, #0a84ff);
  }
  
  .error-message {
    color: var(--apple-text-secondary-dark, #a1a1a6);
  }
  
  .empty-icon {
    color: var(--apple-text-tertiary-dark, #8e8e93);
  }
  
  .empty-message {
    color: var(--apple-text-secondary-dark, #a1a1a6);
  }
}
</style> 